/**************************************************
* reset&common.css
*
* 1 - reset
**************************************************/
/* Noto-Sans 글꼴*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
/**************************************************
* 1 - reset
**************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { border:0; font-size:100%; margin:0; padding:0; vertical-align:baseline; outline:none !important; box-sizing:border-box; }
/* HTML5 display-role reset for older browsers */
a, a:hover, a:focus { color:inherit; outline:none; text-decoration:none; }
article, aside, details, figcaption, figure,
footer, header, menu, nav, section { display:block; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:none; }
body { background-color:white; font-family:'Noto Sans KR', sans-serif !important; font-size:14px; letter-spacing:0px !important; line-height:1 !important; -webkit-text-size-adjust:none !important; }
em { font-style:normal; }
ol, ul { list-style:none; }
img { width:100%; height:100%; outline:0; border:0; }
table { border-collapse:collapse; border-spacing:0; }

/* ----------------------------------------------------------------------------------------------------
Super Form Reset
A couple of things to watch out for:
- IE8: If a text input doesn't have padding on all sides or none the text won't be centered.
- The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders.
- You NEED to set the font-size and family on all form elements
- Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs
- You can style the upload button in webkit using ::-webkit-file-upload-button
- ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out.
- IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block.
- By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs
----------------------------------------------------------------------------------------------------*/

input, label, select, button { background:none; border:0; display:inline-block; font-size:14px; line-height:1; margin:0; outline:none; padding:0; vertical-align:middle; white-space:normal; }
textarea { background:none; border:0; display:inline-block; font-size:14px; line-height:1; margin:0; outline:none; padding:0; vertical-align:middle; }

/* Remove the stupid outer glow in Webkit */
input:focus { outline:0; }

/* Box Sizing Reset -----------------------------------------------*/
/* All of our custom controls should be what we expect them to be */
input, textarea { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; margin:7px 0; -webkit-border-radius:0; }

/* These elements are usually rendered a certain way by the browser */
button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; cursor:pointer; }
input[type=text], input[type=password] { width:100%; padding:0 10px; display:inline-block; border:1px solid #ccc; box-sizing:border-box; background-color:#fff; height:30px; line-height:30px; }

/* Text Inputs -----------------------------------------------*/
input[type=date], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=range], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week] { }

/* Button Controls -----------------------------------------------*/
input[type=checkbox], input[type=radio] { width:13px; height:13px; border:1px solid #ccc; }
input[type=radio] { border-radius:100%; }

/* File Uploads -----------------------------------------------*/
input[type=file] { }

/* Search Input -----------------------------------------------*/
/* Make webkit render the search input like a normal text field */
input[type=search] { -webkit-appearance:textfield; -webkit-box-sizing:content-box; } 
/* Turn off the recent search for webkit. It adds about 15px padding on the left */
::-webkit-search-decoration { display:none; }

/* Buttons -----------------------------------------------*/
button, input[type="reset"], input[type="button"], input[type="submit"] { overflow:visible; /* Fix IE7 display bug */ width:auto; }

/* IE8 and FF freak out if this rule is within another selector */
::-webkit-file-upload-button { padding:0; border:0; background:none; }

/* Textarea -----------------------------------------------*/
textarea { width:100%; resize:none; vertical-align:top; /* Move the label to the top */ overflow:auto; /* Turn off scroll bars in IE unless needed */ background-color:#fff; border:1px solid #ccc; box-sizing:border-box; padding:12px 10px; }

/* Selects -----------------------------------------------*/
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select::-ms-expand { display: none; /* 화살표 없애기 for IE10, 11*/ }
select[multiple] { vertical-align:top; /* Move the label to the top */ }

/* label -----------------------------------------------*/
label { cursor:pointer; }


/**************************************************
* slick slide *
**************************************************/
.slick-slider { position:relative; display:block; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent; }
.slick-list { position:relative; display:block; overflow:hidden; margin:0; padding:0; }
.slick-list:focus { outline:none; }
.slick-list.dragging { cursor:pointer; cursor:hand; }
.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); }
.slick-track { position:relative; top:0; left:0; display:block; margin-left:auto; margin-right:auto; }
.slick-track:before, .slick-track:after { display:table; content:''; }
.slick-track:after { clear:both; }
.slick-loading .slick-track { visibility:hidden; }
.slick-slide { display:none; float:left; height:100%; min-height:1px; }
[dir='rtl'] .slick-slide { float:right; }
.slick-slide img { display:block; }
.slick-slide.slick-loading img { display:none; }
.slick-slide.dragging img { pointer-events:none; }
.slick-initialized .slick-slide { display:block; }
.slick-loading .slick-slide { visibility:hidden; }
.slick-vertical .slick-slide { display:block; height:auto; border:1px solid transparent; }
.slick-arrow.slick-hidden { display:none; }

/**************************************************
* 0 - popup
**************************************************/
/* popup */
.popuparea { z-index:95;  }
.popuparea .popupbox.newopen { width:560px; height:auto; cursor:pointer; box-sizing:border-box; padding-bottom:10px; }
.popuparea .popupbox { position:absolute; z-index:100; overflow:hidden; border:3px solid #006db0; background-color:#fff; left:200px; top:130px; box-sizing:border-box; }
.popuparea .popupbox button.btn-close {position:absolute; right:0; top:0; width:40px; height:40px; background:#006db0; color:#fff; cursor:pointer; text-align:center; }
.popuparea .popupbox button.btn-close i { font-size:20px; }
.popuparea .popupbox button.btn-more { position:absolute; right:10px; bottom:5px; font-size:13px; cursor:pointer; text-align:center; }
.popuparea .popupbox button.btn-more img { width:10px; height:10px; margin-right:5px; }
.popuparea .popupbox img { width:100%; height:100%; }
.popuparea .popupbox .txtbox { line-height:1.6; font-size:14px; padding:20px 30px 50px; box-sizing:border-box; letter-spacing:0.2px; display:none; }
.popuparea .popupbox span.tit { font-size:24px; display:block; line-height:1.4; color:#006db0; margin-bottom:20px; }
.popuparea .popupbox span.from { display:block; text-align:right; font-size:24px; margin:30px 0 10px; }
@media (max-width:992px) {
    .popuparea .popupbox { left:50%; top:50px; margin-left:-280px; }
}
@media (max-width:640px) {
    .popuparea { }
    .popuparea .popupbox.newopen { width:100%; }
    .popuparea .popupbox {left:0; top:0; margin-left:0; }
}

/**************************************************
* 0 - common
**************************************************/
body { position:relative; }
.body_wrap { display:none; background-color:#ffffff; height:100%; left:0; position:fixed; top:0; width:100%; z-index:999; }
.body_wrap i { display:block; left:0; margin-top:-16px; position:absolute; text-align:center; top:50%; width:100%; }
@media (min-width:0) {
    .inner { box-sizing:border-box; padding:0 10px; position:relative; }
}
@media (min-width:1220px) { 	
    .inner { margin:0 auto; width:1200px; }
}

/* section 공통 */
@media (min-width:0) {
    .section { padding:50px 10px; }
    .section_title { font-size:25px; margin-bottom:20px; }
}
@media (min-width: 1024px) { 	
    .section { padding:50px 10px; }
	.section_title { font-size:40px; margin-bottom:40px; }
	
}
@media (min-width: 1200px) { 	
    .section { padding:60px 0; }
}

/* custom.css */
.clearfix:after { clear:both; content:""; display:block; overflow:hidden; }
.txc { text-align:center; }
.ell1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.4; height:1.4em; }
.ell2 { display:inline-block; font-size:14px; max-height:2.8em; line-height:1.4; overflow:hidden; width:100%; }
.ell3 { display:inline-block; font-size:14px; max-height:4.2em; line-height:1.4; overflow:hidden; width:100%; }
.ell4 { display:inline-block; font-size:14px; max-height:5.6em; line-height:1.4; overflow:hidden; width:100%; }
.ell5 { display:inline-block; font-size:14px; max-height:7em; line-height:1.4; overflow:hidden; width:100%; }

/*드랍다운*/
.dropbtn { background-color:#fff; border:none; color:#fff; cursor:pointer; font-size:13px; padding:10px; }
.dropbtn_default { background-color:#000; }
.dropdown { display:inline-block; position:relative; }
.dropdown-content { background-color:#fff; border:1px solid #ccc; border-top:0; display:none; min-width:160px; overflow:auto; position:absolute; z-index:2; }
.dropdown-content a { color:#555; display:block; font-size:12px; padding:10px; text-decoration:none; }
.dropdown a:hover { background-color:#f1f1f1; }
.dropdown-content.show { display:block; }

/* lang style */
.subheader-gtrans { float:right; display:inline-block; }
.goog-te-gadget img { display:none; }
.goog-te-gadget-simple { height:28px; line-height:26px; border-color:#ccc !important; background:#fff url('/images/contents/icon_down_01.png') no-repeat 95% 50%; padding-left:5px; width:80px; text-align:left; }
.goog-te-gadget-simple .goog-te-menu-value { margin:0; color:#666 !important; font-size:12px; }
.goog-te-gadget-simple .goog-te-menu-value img { display:none; margin:0; }
.goog-te-gadget-simple .goog-te-menu-value img + span { display:none; }

div#goog-gt-tt { box-shadow:none !important; -webkit-box-shadow:none !important; }
.goog-te-menu-frame { box-shadow:none !important; -webkit-box-shadow:none !important; }
@media (min-width:1220px) {
    .goog-te-gadget-simple { width:100px; }
}

/**************************************************
* animation
**************************************************/
@-webkit-keyframes fadeEffect { 	
    from { opacity:0; }
	to { opacity:1; }
}
@keyframes fadeEffect { 	
    from { opacity:0; }
	to { opacity:1; }
}
.ani { -moz-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; transition-property:all .2s linear 0s; -webkit-transition:all .2s linear 0s; }
@-webkit-keyframes animatetop { 	
    from { opacity:0; top:-300px; }
	to { opacity:1; top:0; }
}
@keyframes animatetop { 	
    from { opacity:0; top:-300px; }
	to { opacity:1; top:0; }
}

@-webkit-keyframes effect {
    from {
        -webkit-transform:scale(1,1);
        transform:scale(1,1);   
    }
    to {
        -webkit-transform:scale(1.1,1.1);
        transform:scale(1.1,1.1); 
    }
}
@keyframes effect {
    from {
        -webkit-transform:scale(1,1);
        transform:scale(1,1);   
    }
    to {
        -webkit-transform:scale(1.1,1.1);
        transform:scale(1.1,1.1); 
    }
}

.effect {
  -webkit-animation-name: effect;
  animation-name: effect;
}

/**************************************************
* iframe
**************************************************/
.video-container { height:100%; overflow:hidden; position:relative; width:100%; }
.video-container iframe, .video-container object, .video-container embed { height:100%; left:0; position:absolute; top:0; width:100%; }

/**************************************************
* modal
**************************************************/
.modal { background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.6); display:none; height:100%; left:0; overflow:auto; padding-top:100px; position:fixed; top:0; width:100%; z-index:9999; }
.modal-content { animation-duration:0.4s; animation-name:animatetop; background-color:#fefefe; border:1px solid #888; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); margin:auto; padding:0; position:relative; -webkit-animation-duration:0.4s; -webkit-animation-name:animatetop; width:80%; }
.close { color:white; float:right; font-size:28px; font-weight:bold; position:absolute; right:10px; top:-35px; width:16px; height:16px; }
.close:hover, .close:focus { color:#000; cursor:pointer; text-decoration:none; }
.modal-header { background-color:#5cb85c; color:white; padding:2px 16px; }
.modal-body { padding:2px 16px; }
.modal-footer { background-color:#5cb85c; color:white; padding:2px 16px; }

@media (min-width:992px) {
    .modal { padding-top:150px; }
}
/**************************************************
* mobile
**************************************************/
@media (max-width:992px) {
    .mobile-only { display:block; }
    .pc-only { display:none; }
}
@media (min-width:992px) {
    .mobile-only { display:none; }
    .pc-only { display:block; }
}
/**************************************************
* hiddencontent
**************************************************/
.hiddencontents { display:none; }
.hiddencontents.on { display:block; }

/**************************************************
* tabbox
**************************************************/
@media (min-width:0) {
    .inner .tab { list-style-type:none; margin:0; overflow:hidden; padding:0; }
    .inner .tab li { float:left; margin-right:10px; }
    .inner .tab li a { background-color:#888888; color:#ffffff; display:block; font-weight:bold; padding:14px 16px; text-align:center; text-decoration:none; transition:0.3s; }
    .inner .tab li a:hover, .inner .tab li a:focus, .inner .tab li a.active { background-color:#f56363; }
    .inner .tabcontent { animation:fadeEffect 1s; display:none; padding:6px 12px; -webkit-animation:fadeEffect 1s; }
    
    /* tab_sub */
    .tab_sub { clear:both; position:absolute; top:-10px; width:calc(100% - 20px); z-index:3; }
    .tab_sub .section_tab { background:#fff; border:1px solid #ccc; border-bottom:0; box-sizing:border-box; overflow:hidden; }
    .tab_sub .section_tab li { border-bottom:1px solid #ccc; border-right:1px solid #ccc; box-sizing:border-box; float:left; padding:0; text-align:center; width:50%; }
    .tab_sub .section_tab li:last-child { border-right:none; }
    .tab_sub .section_tab li.on { border-bottom-color:#00529b; }
    .tab_sub .section_tab li.on a { color:#00529b; }
    .tab_sub .section_tab li.bnone { border-right:none; }
    .tab_sub .section_tab li a { color:#787878; display:block; line-height:40px; font-size:12px; }
    .tab_sub .section_tab.i2 li { width:50%; }
    .tab_sub .section_tab.i3 li { width:33.33%; }
    .tab_sub .section_tab.i4 li { width:25%; }
    .tab_sub .section_tab.i5 li { width:20%; }

}
@media (min-width:768px) {
    .tab_sub { width:100%; left:50%; margin-left:-50%; }
    .tab_sub .section_tab li { padding:0 10px; }
    .tab_sub .section_tab li a { font-size:14px; }
}
@media (min-width:992px) {
    .tab_sub .section_tab li a { font-size:15px; }
}
@media (min-width:1220px) {
    .tab_sub { top:-23px;}
    .tab_sub .section_tab li a { line-height:45px; }
}

/**************************************************
* table_num
**************************************************/
.table_num::before { clear:both; content:''; display:block; overflow:hidden; }
.table_num { clear:both; margin:30px 0 0 0; width:100%; text-align:center; }
.table_num ul { height:30px; line-height:30px; display:table; margin:0 auto; }
.table_num ul li { float:left; margin-left:5px; text-align:center; width:30px; height:30px; }
.table_num ul li:first-child{ margin-left:0; }
.table_num ul li a { display:block; font-size:13px; color:#787878; line-height:29px; }
.table_num ul li.on a { color:#00529b; font-weight:600; }
.table_num ul li a.Prev{ display:block; background:url(/images/contents/left.png) center center no-repeat; width:100%; height:100%; background-size:20% auto; }
.table_num ul li a.PrevPrev { display:block; background:url(/images/contents/lleft.png) center center no-repeat; width:100%; height:100%; background-size:31% auto; }
.table_num ul li a.Next{ display:block; background:url(/images/contents/right.png) center center no-repeat; width:100%; height:100%; background-size:20% auto; }
.table_num ul li a.NextNext { display:block; background:url(/images/contents/rright.png) center center no-repeat; width:100%; height:100%; background-size:31% auto; }

@media (max-width: 640px) {
	.table_num ul li { margin-left:4px; width:25px; height:25px; }
	.table_num ul li a{ line-height:24px; }
}

/**************************************************
* button group
**************************************************/
@media (min-width:0) {
    .inner .btn_group { margin-top:30px; text-align:center; }
    .inner .btn_group::after { content:""; display:block; clear:both; overflow:hidden; }
    .inner .btn_group .btn { display:inline-block; font-size:15px; height:35px; line-height:33px; margin:0 5px; padding:0 20px; -webkit-transition:all 0.5s; transition:all 0.5s; }
    
    .inner .btn_group .btn.btn_default { background-color:#333; color:#fff; }
    .inner .btn_group .btn.btn_submit { border:1px solid #00529b; color:#00529b; }
    .inner .btn_group .btn.btn_cancel { border:1px solid #ccc; color:#787878; }
    .inner .btn_group .btn.btn_write { background-color:#333; color:#fff; float:right; height:35px; line-height:33px; padding:0 20px; }
    .inner .btn_group .btn.btn_more { border:1px solid #00529b; color:#00529b; }
    
    .inner .btn_group .btn.btn_submit:hover { background-color:#00529b; color:#fff; }
    .inner .btn_group .btn.btn_more:hover { background-color:#00529b; color:#fff; }
}
@media (min-width:992px) {
    .inner .btn_group .btn { height:45px; line-height:43px; padding:0 30px; font-size:16px; }
}
@media (min-width:1024px) {
    .inner .btn_group .btn.btn_more { margin-top:50px; }
}

/**************************************************
* file_input_div
**************************************************/
.file_input_div { background-color:#333; color:#fff; display:inline-block; height:34px; line-height:34px; overflow:hidden; position:relative; text-align:center; vertical-align:middle; width:70px; }
.file_input_img_btn { background-color:#333; height:34px; line-height:34px; display:block; text-align:center; color:#fff; width:70px; }
.file_input_hidden { font-size:0; position:absolute; right:0px; left:0; top:0px; opacity:0; filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); cursor:pointer; width:70px; height:34px; }
input.file_input_textbox { height:34px; line-height:34px; padding:0 5px; width:90%; }

/**************************************************
* 3 - top scroll button
**************************************************/
@media (min-width:0) {
    #top_scroll { background-color:#000000; border:1px solid #cccccc; bottom:30px; color:#ffffff; display:inline-block; font-weight:bold; height:30px; line-height:28px; position:fixed; right:10px; text-align:center; width:30px; z-index:999; }
}
@media (min-width: 1440px) { 	
    #top_scroll { margin-right:-680px; right:50%; }
}
@media (max-width:768px) { 	
    #top_scroll { zoom:0.9; }
}

/**************************************************
* padding
**************************************************/
.padding_b_5{
    padding-bottom: 5px;
}
.padding_b_10{
    padding-bottom: 10px;
}
.padding_b_15{
    padding-bottom: 15px;
}
.padding_b_20{
    padding-bottom: 20px;
}
.padding_b_25{
    padding-bottom: 25px;
}
.padding_b_25{
    padding-bottom: 25px;
}
.padding_b_30{
    padding-bottom: 30px;
}
.padding_b_40{
    padding-bottom: 40px;
}
.padding_t_5{
    padding-top: 5px;
}
.padding_t_10{
    padding-top: 10px;
}
.padding_t_15{
    padding-top: 15px;
}
.padding_t_20{
    padding-top: 20px;
}
.padding_t_25{
    padding-top: 25px;
}
.padding_t_30{
    padding-top: 30px;
}
.padding_t_40{
    padding-top: 40px;
}
.padding_l_5{
    padding-left: 5px;
}
.padding_l_10{
    padding-left: 10px;
}
.padding_l_15{
    padding-left: 15px;
}
.padding_l_20{
    padding-left: 20px;
}
.padding_l_25{
    padding-left: 25px;
}
.padding_l_30{
    padding-left: 30px;
}
.padding_l_40{
    padding-left: 40px;
}
.padding_r_5{
    padding-right: 5px;
}
.padding_r_10{
    padding-right: 10px;
}
.padding_r_15{
    padding-right: 15px;
}
.padding_r_20{
    padding-right: 20px;
}
.padding_r_25{
    padding-right: 25px;
}
.padding_r_30{
    padding-right: 30px;
}
.padding_r_40{
    padding-right: 40px;
}

/**************************************************
* margin
**************************************************/

.margin_b_5{
    margin-bottom: 5px;
}
.margin_b_10{
    margin-bottom: 10px;
}
.margin_b_15{
    margin-bottom: 15px;
}
.margin_b_20{
    margin-bottom: 20px;
}
.margin_b_25{
    margin-bottom: 25px;
}
.margin_b_25{
    margin-bottom: 25px;
}
.margin_b_30{
    margin-bottom: 30px;
}
.margin_b_40{
    margin-bottom: 40px;
}
.margin_t_5{
    margin-top: 5px;
}
.margin_t_10{
    margin-top: 10px;
}
.margin_t_15{
    margin-top: 15px;
}
.margin_t_20{
    margin-top: 20px;
}
.margin_t_25{
    margin-top: 25px;
}
.margin_t_30{
    margin-top: 30px;
}
.margin_t_40{
    margin-top: 40px;
}
.margin_l_5{
    margin-left: 5px;
}
.margin_l_10{
    margin-left: 10px;
}
.margin_l_15{
    margin-left: 15px;
}
.margin_l_20{
    margin-left: 20px;
}
.margin_l_25{
    margin-left: 25px;
}
.margin_l_30{
    margin-left: 30px;
}
.margin_l_40{
    margin-left: 40px;
}
.margin_r_5{
    margin-right: 5px;
}
.margin_r_10{
    margin-right: 10px;
}
.margin_r_15{
    margin-right: 15px;
}
.margin_r_20{
    margin-right: 20px;
}
.margin_r_25{
    margin-right: 25px;
}
.margin_r_30{
    margin-right: 30px;
}
.margin_r_40{
    margin-right: 40px;
}

/**************************************************
* width
**************************************************/
#section_menu .section_tab.i1 { display:none; }
#section_menu .section_tab.i2 li { width:50%; }
#section_menu .section_tab.i3 li { width:33.333%; }
#section_menu .section_tab.i4 li { width:25%; }
#section_menu .section_tab.i5 li { width:20%; }
#section_menu .section_tab.i6 li { width:16.666%; }

.topnav.i1 { display:none; }
.topnav.i2 li.menu_w { width:calc(50% - 100px); }
.topnav.i3 li.menu_w { width:calc(33.333% - 66.666px); }
.topnav.i4 li.menu_w { width:calc(25% - 50px); }
.topnav.i5 li.menu_w { width:calc(20% - 40px); }
.topnav.i6 li.menu_w { width:calc(16.666% - 33.333px); }
.topnav.i7 li.menu_w { width:calc(14.285% - 28.571px); }
.topnav.i8 li.menu_w { width:calc(12.5% - 25px); }
.topnav.i9 li.menu_w { width:calc(11.111% - 22.222px); }

.topnav.nologoi1 { display:none; }
.topnav.nologoi2 li.menu_w { width:50%; }
.topnav.nologoi3 li.menu_w { width:33.333%; }
.topnav.nologoi4 li.menu_w { width:25%; }
.topnav.nologoi5 li.menu_w { width:20%; }
.topnav.nologoi6 li.menu_w { width:16.666%; }
.topnav.nologoi7 li.menu_w { width:14.285%; }
.topnav.nologoi8 li.menu_w { width:12.5%; }
.topnav.nologoi9 li.menu_w { width:11.111%; }

/**************************************************
* 1 - header
**************************************************/
@media (min-width:0) {
    #header { position:relative; z-index:99; background:#ffffff; }
    #header::after{  clear:both; content:''; display:block; }
}

@media (min-width:992px) {
	#header{ width:250px; position:fixed; left:0; height:100%; z-index:1; background:#fff; box-shadow:10px 0 10px rgba(0,0,0,.2); }
}

/**************************************************
*   1.1 - top
**************************************************/
@media (min-width:0) {
    #gnb { background-color:#f6f6f6; box-sizing:border-box; font-size:0; overflow:hidden; padding:0; }
    #gnb h1 { display:none; }
    #gnb h1 span{ font-size:0; }
	    
    /* hLeft */
    #gnb .hLeft { box-sizing:content-box; float:left; padding:10px 0; width:40%; margin-top:3px; }
    #gnb .hLeft .pc-only { display:none; }
    #gnb .hLeft a, #gnb .hLeft span { color:#333333; display:inline-block; font-size:14px; line-height:1.4; margin-right:5px; vertical-align:middle; }
    #gnb .hLeft a i { margin-right:5px; }
    
    /* hRight */
    #gnb .hRight { box-sizing:content-box; float:right; padding:10px 0; }
    #gnb .hRight p { margin-top:0; text-align:right; }
    #gnb .hRight p a{ display:inline-block; margin-right:20px; font-size:0; }
    #gnb .hRight p a:last-child{ margin-right:0; }
    #gnb .hRight p a span{ font-size:14px; }
    
    #gnb .hRight .socialList { display:inline-block; float:right; margin-right:5px; vertical-align:middle; }
    #gnb .hRight .socialList select { background:#fff url("/images/contents/icon_down_01.png") no-repeat 95% 50%; border:1px solid #ccc; box-sizing:border-box; color:#666; font-size:12px; height:28px; line-height:28px; padding-left:10px; width:80px; }
    
    #gnb .hRight .lang { display:inline-block; float:right; vertical-align:middle; width:80px; height:29px; background:#fff; }
    #gnb .hRight .lang select { background:#fff url("/images/contents/icon_down_01.png") no-repeat 95% 50%; border:1px solid #ccc; box-sizing:border-box; color:#666; font-size:12px; height:28px; line-height:28px; padding-left:10px; width:80px; }
    
}
@media (min-width:992px) { 	
    #gnb { padding:10px 0; }
    #gnb .inner{ width:100%; }
	#gnb h1 { display:inline-block; }
    
    #gnb .hLeft { margin-top:5px; padding:0; width:100%; }
	#gnb .hLeft .pc-only { display:block; }
	#gnb .hRight { padding:0; width:100%; text-align:center; margin:15px 0 10px 0; }
	#gnb .hLeft a, #gnb .hLeft span { text-align:center; }
	
    #gnb .hRight .socialList { float:none; margin-top:10px; }
	#gnb .hRight .lang { float:none; margin-right:5px; margin-top:10px; }
}
@media (min-width:1024px) { 
    #gnb .hRight p { margin-top:20px; text-align:center; }
    #gnb .hRight p a{ display:inline-block; width:49.5%; margin-right:1%; font-size:0; }
}
@media (min-width:1220px) { 	
    #gnb .hRight .socialList select { width:100px; }
	#gnb .hRight .lang { width:100px; }
}

/**************************************************
*   1.2 - main menu
**************************************************/
@media (min-width:0) {
    #mainMenu { background-color:#fff; /* font-size:0; */ -moz-transition:all .2s linear 0s; -o-transition:all .2s linear 0s; transition-property:all .2s linear 0s; -webkit-transition:all .2s linear 0s; z-index:9998; }
    #mainMenu.active { background-color:#ffffff; }
    #mainMenu .inner { position:relative; padding:0; width:100%; }
	
    #mainMenu h1{ display:none; text-align:center; }
    #mainMenu h1 a { color:#545454; font-weight:bold; width:auto; height:40px; font-size:18px; display:inline-block; text-shadow:none; padding:5px 10px; margin:5px 0; }
    #mainMenu h1 a img { vertical-align:text-bottom; width:auto; }
	
    #mainMenu ul.topnav { list-style-type:none; padding:0; }
    #mainMenu ul.topnav li { display:none; position:relative; }
    #mainMenu ul.topnav li.first { display:block; float:left; }
    #mainMenu ul.topnav li.first span{ font-size:0; }
	
    #mainMenu ul.topnav li.icon { display:inline-block; float:right; font-weight:bold; }
    #mainMenu ul.topnav li.menu_w { display:none; }
    
    #mainMenu ul.topnav li a { transition:all 0.3s; text-decoration:none; font-size:16px; padding:12px 10px; color:#232323; }
    #mainMenu ul.topnav li.icon a { padding:10px 0; }
    #mainMenu ul.topnav li.first a { color:#545454; font-weight:bold; width:auto; height:40px; font-size:18px; display:inline-block; text-shadow:none; padding:5px 10px; margin:5px 0; }
    #mainMenu ul.topnav li.first a img { vertical-align:text-bottom; width:auto; }
    #mainMenu ul.topnav li a.menu { border-bottom:1px solid #cccccc; overflow:hidden; text-overflow:clip; white-space:nowrap; }
	#mainMenu ul.topnav li a.bon { border-top:1px solid #cccccc; }
    
/*     #mainMenu ul.topnav.responsive { position:relative; }
	#mainMenu ul.topnav.responsive li.first a { display:inline-block; }
	#mainMenu ul.topnav.responsive li.icon { position:absolute; right:0; top:0; } */
	#mainMenu ul.topnav li.icon a { font-size:24px; padding:10px 10px; display:inline-block; }
/* 	#mainMenu ul.topnav.responsive li { display:inline; float:none; }
	#mainMenu ul.topnav.responsive li a { display:block; text-align:left; } */
    
}
@media (min-width:992px) { 	
    #mainMenu .inner{ width:100%; }
	#mainMenu h1{ display:block; }
    #mainMenu ul.topnav li { display:block; width:100%; }
	#mainMenu ul.topnav li.icon { display:none; }
	#mainMenu ul.topnav li.menu_w { display:block; clear:both; }
	#mainMenu ul.topnav li a { display:block; width:100%; font-size:16px; padding:10px 20px; }
    #mainMenu ul.topnav li.first{ display:none; }
    #mainMenu ul.topnav li.first a { width:100%; font-size:20px; }
    #mainMenu ul.topnav li.menu_w a { padding:16px 20px;  }
    #mainMenu ul.topnav li.menu_w > a { background:url(/images/contents/blet01.png) 10px center no-repeat; }
    #mainMenu ul.topnav li a.menu { border-color:#eee; }
	#mainMenu ul.topnav li a.bon { border-top:none; }
    
    /* #mainMenu ul.topnav.responsive li { float:left; } */
    
}

@media (max-width:992px) { 	
	#mainMenu.active{ width:100%; position:fixed; top:0; box-shadow:0px 3px 5px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow:0px 3px 5px 0px rgba(50, 50, 50, 0.75); -webkit-box-shadow:0px 3px 5px 0px rgba(50, 50, 50, 0.75); } 

}
    
@media (min-width:0) { 	
	
    /* 서브메뉴2 */
    #mainMenu.menuv2 ul.topnav li.menu_w:hover{ background:rgba(95,55,17,0.5); }
    #mainMenu.menuv2 ul.topnav li.menu_w:hover > a{ color:#fff; }
    #mainMenu.menuv2 ul.topnav li.menu_w:hover ul{ padding:10px 0; }
    #mainMenu.menuv2 ul.topnav li ul:before { display:none; content:''; background:url(/images/contents/sub_bg.png); position:absolute; top:-11px; width:22px; height:11px; left:50%; margin-left:-11px; }
    #mainMenu.menuv2 ul.topnav li.menu_w ul { position:relative; left:0; width:100%; background-color:#07913b; max-height:0; overflow:hidden; transition:all 0.5s; z-index:1; }
    #mainMenu.menuv2 ul.topnav li.menu_w ul::before{ display:block; content:''; position:absolute; width:100%; height:100%; left:0; top:0; background:url(/images/common/menu_bg.png) no-repeat bottom right; background-size:40px auto; }
    #mainMenu.menuv2 ul.topnav li.menu_w.on ul { z-index:50; max-height:450px; }
    
    #mainMenu.menuv2 ul.topnav li.menu_w ul li { display:inline-block; float:left; position:relative; width:100%; padding:0 10px; }
    #mainMenu.menuv2 ul.topnav li.menu_w ul li:hover a{ background-color:#fff; color:#2c9a50; }
    #mainMenu.menuv2 ul.topnav li.menu_w ul li a { display:block; padding:10px 0 10px 30px ; font-size:14px; text-align:left; color:#fff; }
}

@media (min-width:992px) { 	
    
    #mainMenu.menuv2 { overflow:hidden; height:100%; }
    #mainMenu.menuv2 .inner{ height:100%; }
    #mainMenu.menuv2 ul.topnav{ width: 107%; overflow-y: scroll; }
}
 
/**************************************************
* mobile_menu
**************************************************/
@media (min-width:0) {
    #mobile_menu { background:#fff; display:none; height:100%; position:fixed; top:97px; width:100%; z-index:9999; }
    #mobile_menu.active { display:block; z-index:9999; }
    #mobile_menu .bottom { height:100%; position:relative; }
    #mobile_menu .bottom .hide { height:100%; position:absolute; width:37%; }
    #mobile_menu a { color:#333; font-size:14px; }
    #mobile_menu .w50.left { font-size:14px; height:100%; left:0; overflow:auto; position:absolute; width:111%; }
    #mobile_menu .w50.left .wrap { height:100%; position:relative; }
    #mobile_menu .w50.left .wrap ul { height:auto; padding-bottom:264px; position:relative; }
    #mobile_menu .w50.left li { background:#ededed; border-bottom:1px solid #ccc; color:#4e4e4e; font-size:17px; height:160px; line-height:160px; text-align:center; text-indent:-10px; }
    #mobile_menu .w50.left li.on { background:#ffffff; color:#a67322; }
    #mobile_menu .w50.right { background:#ffffff; border-left:1px solid #fff; box-sizing:border-box; font-size:14px; height:100%; overflow:auto; position:absolute; right:-9%; width:73%; }
    #mobile_menu .w50.right .wrap { height:100%; position:absolute; width:100%; }
    #mobile_menu .w50.right .inner { height:100%; width:100%; }
    #mobile_menu .w50.right ul { margin-top:35px; }
    #mobile_menu .w50.right ul:last-child { padding-bottom:364px; }
    #mobile_menu .w50.right ul li { border-bottom:1px solid #cccccc; height:35px; line-height:35px; margin-left:10%; text-indent:5px; }
    #mobile_menu .w50.right ul li a { color:#454545; display:block; font-size:13px; }
    #mobile_menu .w50.right ul li.title { border-bottom:2px solid #000; font-size:16px; height:50px; margin-bottom:5px; padding-top:9px; }
}

/**************************************************
* 2 - menu_cs
**************************************************/
@media (min-width:0) {
    #menu_cs{ position:absolute; clear:both; bottom:0; width:100%; font-size:18px; box-sizing:border-box; padding:20px 20px 35px; border-top:1px solid #ccc; background:#fff; }
    #menu_cs .title{ display:block; font-size:14px; margin-bottom:10px; }
    #menu_cs .title span{ color:#07913b; }
    #menu_cs button { display:block; width:70%; margin:10px auto 20px; background:#fff; color:#000; text-align:center; padding:10px 0; font-size:14px; letter-spacing:0; font-weight:bold; cursor:pointer; }

	#menu_cs .linkbox select{ background: #fff url(/images/contents/icon_down_01.png) no-repeat 95% 50%;
    border: 1px solid #ccc; box-sizing: border-box; color: #666; font-size: 12px; height: 28px; line-height: 28px; padding-left: 10px; width: 100%; }
}

@media (max-width:992px) {
	#menu_cs{ position:fixed; bottom:188px; padding:20px; }
}

/**************************************************
*   #footer
**************************************************/
@media (min-width:0) { 	
    .footer { border-top:1px solid #ccc; overflow:hidden; position:relative; width:100%; background:#f4f4f4; }
	.footer.pc{ display:none; }
	.footer.mob{ display:block; }
    .footer .company > img{ width:auto; vertical-align:top; }
	.footer .company { padding:10px 0; position:relative; width:100%; text-align:center; }
	.footer .company .btngp { display:inline-block; margin-top:5px; text-align:center; width:100%; }
	.footer .company .company_txt { color:#333; font-size:12px; line-height:1.4; padding:10px 0; }
	.footer .company .company_txt .bar { display:inline-block; font-size:10px; }
	.footer .company .company_txt .tx1 { font-size:12px; margin-top:5px; }
	.footer .company .company_txt p { text-align:center; }
	.footer .company .company_txt p:first-child { font-size:14px; line-height:1.6; }
	.footer .company .footbn { margin-top:5px; position:relative; display:none; }
	.footer .company .footbn ul { margin-bottom:10px; overflow:hidden; }
	.footer .company .footbn ul li { position:relative; }
	.footer .company .footbn .slick-next { background:url("/images/contents/btn_next_01.png") no-repeat 0 0; background-size:contain; display:block; font-size:0; height:20px; margin-top:-10px; position:absolute; right:0; text-indent:-9999px; top:50%; width:12px; }
	.footer .company .footbn .slick-prev { background:url("/images/contents/btn_prev_01.png") no-repeat 0 0; background-size:contain; display:block; font-size:0; height:20px; left:0; margin-top:-10px; position:absolute; text-indent:-9999px; top:50%; width:12px; }
	.footer .company .footbn .imgbox { display:block; height:130px; width:100%; }
	.footer .company .footbn .imgbox img { height:100%; width:100%; }
	.footer .company .footbn .title { color:#fff; display:block; font-size:20px; height:50px; left:50%; margin-left:-150px; margin-top:-25px; position:absolute; text-align:center; top:50%; width:310px; }
	.footer .company .footbn .title em { font-size:11px; font-style:normal; }

	.footer .company button { background-color:#0096db; color:#ffffff; cursor:pointer; display:inline-block; font-size:12px; height:30px; line-height:30px; margin-right:5px; padding:0 10px; }
}
@media (min-width:768px) { 	
    .footer .company .footbn .title { font-size:26px; }
	.footer .company .footbn .title em { font-size:12px; }
}
@media (min-width:1024px) { 	
	/* #footer .company {  } */
    .footer .company { overflow:hidden; padding:10px 40px; }
	.footer .company .company_txt { }
	.footer .company > img{ margin-top:10px; display:inline-block; }
	.footer .company .footbn { float:left; width:40%; }
	.footer .company .footbn .bx-next { width:18px; }
	.footer .company .footbn .bx-prev { width:18px; }
}
@media (min-width:1220px) { 	
    .footer .company { overflow:hidden; padding-left:0; padding-left:250px; }
	/* #footer .company .company_txt { float:left; width:100%; } */
	.footer .company .footbn { float:left; width:40%; }
	.footer .company .footbn .bx-next { width:18px; }
	.footer .company .footbn .bx-prev { width:18px; }
	.footer.pc{ display:block; }
	.footer.mob{ display:none; }
	
	.footer .company .company_txt { display:inline-block; width:calc( 100% -152px); vertical-align:top; padding-left:20px; }
	.footer .company .company_txt p{ text-align:left; }
}

/**************************************************
*   common
**************************************************/
@media (min-width:0) {
    #contents { position:relative; clear:both; background:#f4f4f4; }
	#contents .inner{ width:100%; }
	#contents.main{ overflow:hidden; }
}

@media (min-width:992px) {
	#contents{ padding-left:250px; }
}

@media (min-width:1470px) {
	#contents .section2 .inner{ width:1200px; }
	#contents .section3 .inner{ width:1200px; }
}



@media(max-width:1200px){
	#contents.main{ padding-bottom:188px; }
}

@media(max-width:992px){
	#contents.main{ padding-bottom:280px; }
}

/**************************************************
*   2.1 - main banner
**************************************************/
@media (min-width:0) { 	
    #mainBanner {position:relative; }
	#mainBanner .bxslider { height:320px; overflow:hidden; }
	#mainBanner .bxslider li { overflow:hidden; position:relative; }
    #mainBanner .bxslider li .imgbox { height:320px; overflow:hidden; background-size:cover; background-position:center; background-repeat:no-repeat; }
    
	#mainBanner .bxslider li .txtbox2_wrap { height:100%; left:0; position:absolute; top:0; width:100%; text-align:center; }
    #mainBanner .bxslider li .txtbox2_wrap .txtbox2 { top:35%; width:80%; left:50%; margin-left:-40%; padding:20px; box-sizing:border-box; line-height:1.4; font-size:20px; color:#fff; }
	#mainBanner .bxslider li .txtbox2_wrap .txtbox2 .tx1 { width:100%; }
	#mainBanner .bxslider li .txtbox2_wrap .txtbox2 .tx2 { box-sizing:border-box; display:block; width:100%; }
    
	#mainBanner .slick-arrow { font-size:0; height:30px; margin-top:-12px; position:absolute; text-indent:-9999px; top:50%; transition:all 0.5s; width:30px; z-index:49; cursor:pointer; }
	#mainBanner .slick-prev { background:rgba(0,0,0,0.4) url("/images/contents/btn_prev_01.png") no-repeat center; background-size:60%; left:0; }
	#mainBanner .slick-next { background:rgba(0,0,0,0.4) url("/images/contents/btn_next_01.png") no-repeat center; background-size:60%; right:0; }
	#mainBanner:hover .slick-arrow { background-color:rgba(0,0,0,1); }
}
@media (min-width:480px) { 	
}
@media (min-width:768px) { 	
    #mainBanner .bxslider { height:450px; }
    #mainBanner .bxslider li .imgbox { height:450px; }
	#mainBanner .bxslider li .txtbox2_wrap .txtbox2{ font-size:24px; }
    
}
@media (min-width:992px) { 	
    #mainBanner .bxslider { height:600px; }
    #mainBanner .bxslider li .imgbox { height:600px; }
	
    #mainBanner .slick-prev { left:10px; }
	#mainBanner .slick-next { right:10px; }
	#mainBanner .bxslider li .txtbox2_wrap .txtbox2{ top:38%; width:60%; left:0; margin-left:10%; padding:40px; font-size:32px; text-align:left; font-size:28px; }
}


.section5 { overflow:hidden; }
.section5 .box1 .title { font-size:18px; margin-bottom:10px;  }
.section5 .box1 .title a{ float:right; font-size:14px; line-height:18px; }
.section5 .box1 .nlist li { text-indent:10px;}
.section5 .box1 .nlist li dt{ font-size:14px; display:block;padding:5px 0 5px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:75%; float:left; background:url(/images/contents/blet01.png) no-repeat left center; box-sizing:border-box; }
.section5 .box1 .nlist li dd{ width:25%; float:right; font-size:14px; line-height:14px; padding:5px 0; text-align:right; }
.section5 .w50{ float:left; width:100%; padding:20px; background:#f6f8fa; }
.section5 .w50:last-child{ background:#fff; }

@media(min-width:640px){
	.section5 .w50{ width:50%;  }
}

.section1 .menu_slide { font-size:0; padding:10px 15px; background:#01419c url(/images/common/news_bg.png) 80px bottom no-repeat; background-size:100px auto; }
.section1 .menu_slide ul{ overflow:hidden; }
.section1 .menu_slide li { float:left; width: 24.25%; margin-right:1%; }
.section1 .menu_slide li:nth-child(3n){ margin-right:0; }
.section1 .menu_slide li:nth-child(4n){ display:none; }
.section1 .menu_slide li:last-child{ margin-right:0; display:none; }

.section1 .menu_slide li .imgbox {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
	padding-bottom:40%;
}

.section1 .menu_slide li .txtbox {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 13px;
    padding: 10px 0 0 0; color:#fff;
}


@media (min-width:0) {
	.section1 .menu_slide li { width: 32.6666%; }
}


@media (min-width:640px) {
	.section1 .menu_slide li { width: 24.25%; }
	.section1 .menu_slide li:nth-child(3n){ margin-right:1%; }
	.section1 .menu_slide li:nth-child(4n){ display:block; margin-right:0; }

}

@media (min-width:768px) {
	.section1 .menu_slide{ padding:20px; }
	.section1 .menu_slide li { width: 19.2%; }
	.section1 .menu_slide li:last-child { display:block; }
	.section1 .menu_slide li:nth-child(4n){ margin-right:1%; }
}

@media (min-width:1024px) {
    .section1 .menu_slide li .imgbox{ height:82px; padding-bottom:0; }
   }
   



/**************************************************
*   2.2 - .section2
**************************************************/
.section2 .video{ width:100%; position:relative; }
.section2 .video iframe{ width:100%; height:100%; }

.section2 .about{ clear:both; overflow:hidden; color:#787878; }
.section2 .about .q_tit{ background:#baebeb; font-size:18px; padding:20px; }
.section2 .about ul { width:100%; }
.section2 .about li { float:left; width:33.333%; color:#fff; height:130px; padding: 25px 0; text-align:center; }
.section2 .about li b{ display:block; font-size:14px; margin-top:10px; }
.section2 .about li img{ width:auto; height:50px; }
.section2 .about li.fd { background-size:cover; position:relative; cursor:pointer; }
.section2 .about li.fd:hover .cover{ background:rgba(25,25,25,.3); }
.section2 .about li.fd .cover{ background:rgba(25,25,25,.6); position:absolute; top:0; left:0; width:100%; height:100%; }
.section2 .about li.fd a{ position:relative; }
.section2 .about li.fd p{ font-size:18px; margin-top:30px; } 
.section2 .about li.bg1 { background:#61d1d2; color:#086061; }
.section2 .about li.bg2 { background:#3da1db; color:#0a3f5e; }
.section2 .about li.bg3 { background:#d7eb34; color:#383f00; }


.section2 .notice{ clear:both; position:relative; overflow:hidden; padding:20px; min-height:152px; color:#444; }
.section2 .notice .title { font-size: 18px; }
.section2 .notice .title a { float: right; font-size: 14px; line-height: 18px; }
.section2 .notice ul{ padding:10px 0 0 0 ; overflow:hidden; }
.section2 .notice dd,.section2 .notice dt{ float:left; }
.section2 .notice dt{ clear:both; padding-right:5px; }
.section2 .notice dd{ overflow:hidden; display:block; text-overflow:ellipsis; white-space:nowrap; width:80%; }
.section2 .notice dl{ float:left; width:calc(100% - 72px); padding:8px 0; overflow: hidden;}
.section2 .notice a { font-size:14px; }
.section2 .notice a small{ padding:8px 0; float:right;display:block; padding-right:2px;}


/* cs_div */
.section2 .cs_div { background:#fff url('/images/common/cs_bg.png') no-repeat 95% 60%; height:190px; padding:20px; }
.section2 .cs_div .title{ color:#01419c; font-size: 16px; }
.section2 .cs_div a { display:block; font-size:30px; margin:5px 0 15px 0; color:#3da1db; font-weight:bold; }
.section2 .cs_div small { display:block; padding-bottom:5px; font-size:14px; line-height:1.5; }

.section2 .btngp { text-align:center; background:#efefef; }
.section2 .btngp .sns { margin:30px 0; }
.section2 .btngp .sns { display:inline-block; }
.section2 .btngp .sns .last { margin-right:0; }
.section2 .btngp .sns a { display:inline-block; margin-right:10px; vertical-align:middle; }
.section2 .btngp button { background-color:#0096db; color:#ffffff; cursor:pointer; display:inline-block; font-size:12px; height:30px; line-height:30px; margin-right:5px; padding:0 10px; }

	
	@media(max-width:1200px){
		.section2 .about{ position:fixed; bottom:0; width:calc( 100% - 250px); z-index:1; box-shadow:0px -1px 5px rgba(0,0,0,0.1);}
	}
	
	@media(max-width:992px){
		.section2 .about{ width:100%; }
	}
	
/**************************************************
*   2.3 - .section3
**************************************************/
@media (min-width:0) {
    .section3 { width:100%; height:300px; margin:20px 0; }
    .section3 .inner{ height:100%; }
    .section3 iframe{ width:100%; height:100%; }
}


@media (min-width:1200px) {
    .section1 { float:left; display:inline-block; width:calc( 100% - 400px);  }
    .section2 { font-size:0; display:inline-block; width:400px; height:100%; background:#efefef; }
    .section3 { font-size:0; display:inline-block; width:400px;  }
   }
   

/**************************************************
*   2.2 - main board
**************************************************/
/* layout1 */
#contents.layout1 .sub_bg{ position:fixed; width:100%; height:100%; min-height:1000px; background:url(/images/contents/main.jpg); background-size:cover; }
#contents.layout1 .sub_bg .cover{ position:absolute; width:100%; height:100%; background:rgba(0,0,0,.6); }
#contents.layout1 #sub_cont{ position:relative; overflow:hidden; padding:50px 10% 50px 10%; }
#contents.layout1 #sub_cont .sub_box{ position:relative; background:#fff; min-width:900px; }
#contents.layout1 #sub_cont h3{ position: relative; font-size: 1.8em; letter-spacing: 1px; line-height: 1; color: #444; margin-bottom:20px; } 
#contents.layout1 #sub_cont h3::after { position: absolute; content: ''; display: block; width: 100%; height: 1px; left: 0; bottom: -10px; background: #cccccc; }

#contents.layout1 #sub_cont .inner { width: 100%; box-sizing: border-box; overflow:hidden; }

#contents.layout1 #sub_cont .menutop { width: auto; height: 45px; line-height: 45px; float: right; position: relative; z-index: 1; top: 60px; }
#contents.layout1 #sub_cont .menutop img{ width:auto; height:auto; }

@media (max-width: 1300px) {
	#contents.layout1 #sub_cont{ padding: 0 0; }
	#contents.layout1 #sub_cont .sub_box{ width:100%; min-width:100%;  }
}

@media (max-width: 1220px) {
	#contents.layout1 #sub_cont h3{ font-size:1.5em; }
}

@media (max-width: 992px) {
	#contents.layout1 #sub_cont{ margin-left:0; }
	#contents.layout1 #sub_cont .sub_box{ min-height:auto; }
	#contents.layout1 #sub_cont .menutop { display:none; }
}

@media (min-width:0) {
    #contents.layout1 .section { padding:50px 10px; }
}

@media (min-width: 1200px) { 	
    #contents.layout1 .section { padding:60px 20px; }
}

/* layout2 */
#contents.layout2 .sub_bg{ position:fixed; width:100%; height:100%; background:url(/images/contents/main.jpg); }
#contents.layout2 .sub_bg .cover{ position:absolute; width:100%; height:100%; background:rgba(0,0,0,.6); }
#contents.layout2 #sub_cont{ position:relative; overflow:hidden; padding:0 0; }
#contents.layout2 #sub_cont .sub_box{ position:relative; background:#fff; min-height:1000px; min-width:900px; padding-right:20%; }
#contents.layout2 #sub_cont h3{ position: relative; font-size: 1.8em; letter-spacing: 1px; line-height: 1; color: #444; margin-bottom:20px; } 
#contents.layout2 #sub_cont h3::after { position: absolute; content: ''; display: block; width: 100%; height: 1px; left: 0; bottom: -10px; background: #cccccc; }

#contents.layout2 #sub_cont .inner { width: 100%; box-sizing: border-box; overflow:hidden; }
#contents.layout2 #sub_cont .menutop { width: auto; height: 45px; line-height: 45px; float: right; position: relative; z-index: 1; top: 60px; }
#contents.layout2 #sub_cont .menutop img{ width:auto; height:auto; }


@media (max-width: 1500px) {
#contents.layout2 #sub_cont .sub_box{ padding-right:15%; }
}
@media (max-width: 1400px) {
#contents.layout2 #sub_cont .sub_box{ padding-right:8%; }
}
@media (max-width: 1300px) {
	#contents.layout2 #sub_cont{ padding: 0 0; }
	#contents.layout2 #sub_cont .sub_box{ width:100%; min-width:100%; padding-right:0%;  }
}

@media (max-width: 1220px) {
	#contents.layout2 #sub_cont h3{ font-size:1.5em; }
}

@media (max-width: 992px) {
	#contents.layout2 #sub_cont{ margin-left:0; }
	#contents.layout2 #sub_cont .sub_box{ min-height:auto; }
	#contents.layout2 #sub_cont .menutop { display:none; }
}

@media (min-width: 992px) {
	#contents.layout2 #sub_cont .sub_box{ padding-left:15px; }
}

/* layout3 */
#contents.layout3 .sub_bg{ position:fixed; width:100%; height:100%; background:url(/images/contents/main.jpg); }
#contents.layout3 .sub_bg .cover{ position:absolute; width:100%; height:100%; background:rgba(0,0,0,.6); }
#contents.layout3 #sub_cont{ position:relative; overflow:hidden; padding:0 0; }
#contents.layout3 #sub_cont .sub_box{ position:relative; background:#fff; min-height:1000px; min-width:900px; padding: 0 10%; margin:0 auto; }
#contents.layout3 #sub_cont h3{ position: relative; font-size: 1.8em; letter-spacing: 1px; line-height: 1; color: #444; margin-bottom:20px; } 
#contents.layout3 #sub_cont h3::after { position: absolute; content: ''; display: block; width: 100%; height: 1px; left: 0; bottom: -10px; background: #cccccc; }

#contents.layout3 #sub_cont .inner { width: 100%; box-sizing: border-box; overflow:hidden; }
#contents.layout3 #sub_cont .menutop { width: auto; height: 45px; line-height: 45px; float: right; position: relative; z-index: 1; top: 60px; }
#contents.layout3 #sub_cont .menutop img{ width:auto; height:auto; }


@media (max-width: 1300px) {
	#contents.layout3 #sub_cont .sub_box{ width:100%; min-width:100%; padding: 0 10px;  }
}

@media (max-width: 1220px) {
	#contents.layout3 #sub_cont h3{ font-size:1.5em; }
}

@media (max-width: 992px) {
	#contents.layout3 #sub_cont{ margin-left:0; }
	#contents.layout3 #sub_cont .sub_box{ min-height:auto; padding: 0 0; }
	#contents.layout3 #sub_cont .menutop { display:none; }
}